<template>
  <div class="component-confirm-popup">
    <!-- 确认弹窗 -->
    <div class="popup-mask" />
    <div class="popup-box">
      <div class="tit">
        <div class="text">
          {{ popConfiguration.title || '提示' }}
        </div>
        <div
          class="close"
          @click="cancel"
        />
      </div>
      <div class="con">
        <div class="tip">
          <div class="tip-icon warning" />
          <div class="tip-info">
            <div class="result">
              {{ popConfiguration.firstLineText || '未配置提示文本' }}
            </div>
            <div
              v-if="popConfiguration.secondLineText"
              class="date"
            >
              {{ popConfiguration.secondLineText }}
            </div>
            <div class="btns">
              <span
                class="btn-r"
                @click="confirm"
              >{{ popConfiguration.confirmText || '确认' }}</span>
              <span
                class="btn-g"
                @click="cancel"
              >{{ popConfiguration.cancelText || '取消' }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 确认弹窗 -->
  </div>
</template>

<script setup>
const emit = defineEmits(['confirm', 'cancel'])
/**
 * 确认弹窗组件配置:
 *popConfiguration: {
 *  title: 标题
 *  firstLineText: 第一行文本
 *  secondLineText: 第二行文本(选填)
 *  confirmText: 确认按钮文本; 默认 确认
 *  cancelText: 取消按钮文本; 默认 取消
 *}
 */
defineProps({
  popConfiguration: {
    type: Object,
    default: () => {}
  }
})

/**
 * 确认操作
 */
const confirm = () => {
  emit('confirm')
}
/**
 * 取消操作
 */
const cancel = () => {
  emit('cancel')
}

</script>

<style lang="scss" scoped>
.component-confirm-popup{
  .btn-r, .btn-g {
    cursor: pointer;
  }
  .popup-box .con .tip .tip-info .result {
    height: 100% !important;
  }
}

</style>
